<template>
  <div>
    <div class="loadmoreWrap" v-if="childList.length" :style="{'min-height':wrapperHeight+'px'}">
      <div class="offerList" v-for="(item, index) in childList" :key="index">
          <div class="singerBox">
            <div class="boxTitle clearfix">
              <div class="left fl">运单号：{{item.transBillId}}</div>
              <div class="right fr" v-show="userType == 30">{{item.transBillStatusName}}</div>
              <div class="right fr date" v-show="userType == 40">{{item.createDate}}</div>
            </div>
            <div class="addressList" v-for="(addressItem,indexs) in item.addrres" :key="indexs">
              <div class="address clearfix">
                <span class="fl add">{{addressItem.beginSiteProvince | city}}</span>
                <span class="iconTo">&nbsp;</span>
                <span class="fr add">{{addressItem.endSiteProvince | city}}</span>
              </div>
            </div>
            <div class="border">
              <i class="halfLe"></i>
              <i class="halfRi"></i>
            </div>
            <div class="info">
              <div class="up clearfix">
                <div class="left fl">总重量：{{item.transWeight | threeBit}}吨</div>
                <div class="down clearfix"  v-show="userType == 30">
                  <div class="right fr" v-show="item.transBillStatus >= 60">成交价：{{item.actTransPrice | twoBit}}元／吨<span v-show="item.quoteType == 10">(一口价)</span></div>
                      <div class="right fr" v-show="item.transBillStatus < 60">单价：{{item.transPrice | twoBit}}元／吨<span v-show="item.quoteType == 10">(一口价)</span></div>
                </div>

                  <div v-show="userType == 40" class="right fr">回单量：{{(item.actTransWeight*1).toFixed(3)}}吨</div>

              </div>
              <div class="down clearfix" v-show="userType == 30">
                <div class="right fl">杂费：{{item.otherAmount}}</div>
                <div class="right fr" v-show="item.transBillStatus >= 60">成交金额：{{(item.actTransAmount*1).toFixed(2)}}</div>
                <div class="right fr" v-show="item.transBillStatus < 60">我的报价：{{(item.myTransPrice*1).toFixed(2)}}</div>
              </div>
              <div class="down clearfix" v-show="userType == 40">
                <div class="right fl">实际杂费：{{(item.actOtherAmount*1).toFixed(2)}}元</div>
              </div>
            </div>
            <div class="clearfix dispatchBtnWrap">
              <span class="fl" @click='toDetail(item.transBillId)'>查看详情</span>
              <mt-button class='btn needsclick fr' type="primary" size="large"
                         @click.native='toDispatch(item.transBillId,item.transBillStatus)'
                         v-show="isShow(item.transBillStatus)">{{item.transBillStatus | transBillStatusBtn}}
              </mt-button>
              <mt-button class='btn needsclick fr' type="primary" size="large"
                         @click.native='toDispatchadjust(item.settleId,item.settleStatus)'
                         v-show="isShow(item.settleStatus)">调度调整
              </mt-button>
              <mt-button  v-show="item.transBillStatus >= 65 && item.countTrace > 0 " class='btn information fr' type="primary" size="large"
                         @click.native='toTrack(item.transBillId)'>物流信息
               </mt-button>
            </div>
          </div>
        </div>

    </div>
    <div v-else class="noneDataSe" :style="{'height':+noneHeight+'px','position':'relative'}"><span>暂无数据</span></div>
  </div>
</template>
<script type="text/ecmascript-6">
import {mapGetters} from 'vuex';
import ApiService from "@/services/API-servies";
import { Loadmore, Button ,MessageBox} from "mint-ui";
export default {
  data() {
    return {
      list: [],
      // wrapperHeight: 1200,
      allLoaded: false,
      bottomText: "上拉加载更多...",
      topStatus: "",
      pageNo: 1, //默认分页为第一页
      pageSize: 10, //默认每页显示8条数据
      flag: false, //默认没有分页
      wrapperHeight:0,
    };
  },
  props: ["childList"],
  mounted() {
    this.wrapperHeight=this.noneHeight = document.documentElement.clientHeight - 110;
  },
   computed:{
      ...mapGetters(['userType'])
    },
  methods: {
    toDetail(transBillId) {
        // this.setTransportStatus(this.statusActive);
        // this.$router.push({path: 'transportDetail', query: {transBillId: transBillId,setTransportStatus:this.statusActive}})
        if (this.userType == 30) {
          this.$router.push({path: 'transportDetail', query: {transBillId: transBillId}})
        } else {
          this.$router.push({path: 'driverTransportDetail', query: {transBillId: transBillId}})
        }
      },
    isShow(val) {
        if (val == 60) {
          return true;
        } else if (val == 65) {
          return true;
        } else if (val == 68 || val == 74) {
          return true;
        }
        return false;
      },
      arrived(transBillId) {
        //承运商已送达
        /**/
        MessageBox({
          title: '提示',
          message: '确定执行此操作?',
          showCancelButton: true
        }).then(action => {
          if (action == 'confirm') {
            this.$emit('transBillId', transBillId)
          } else if (action == 'cancel') {
            console.log('取消')
          }
        })
      },
      toDispatchAdjust(transBillId, _status){
        if (_status == 65) {
          this.$router.push({path: 'dispatch', query: {transBillId: transBillId, ud: 1}});//调度调整
        }
      },
      toDispatch(transBillId, _status) {
        //暂时写承运商
        if (_status == 60) {
          this.$router.push({path: 'dispatch', query: {transBillId: transBillId, ud: 0}});//调度新增
        }
        if (_status == 65) {
          this.arrived(transBillId);
        }
        if (_status == 68 || _status == 74) {
          //暂时注释掉
          if (this.userType == 30) {
            this.$router.push({path: 'receipt', query: {transBillId: transBillId}})
          } else {
            this.$router.push({path: 'receiptCarrier', query: {transBillId: transBillId}})
          }
          //this.$router.push({path:'receipt', query: {transBillId:transBillId,time:new Date()}})
        }
      },
      toTrack(transBillId){
        this.$router.push({path:'track',query: {transBillId: transBillId}})
      },
  },
  filters: {
    settleStatusBtn(val) {
      if (val == 30) {
        return "发票上传";
      } else if (val == 50) {
        return "发票上传";
      } else if (val == 35 || val == 40) {
        return "发票上传";
      }
    },
    transBillStatusBtn(val) {
        if (val == 60) {
          return '指派车/船'
        } else if (val == 65) {
          return '已送达'
        } else if (val == 68 || val == 74) {
          return '回单上传'
        }
      }
  },
  components: {
    MtLoadmore: Loadmore,
    MtButton: Button
  },
  watch: {
  }
};
</script>
<style scoped lang="less" type="stylesheet/less">
@import "~common/less/variable";
.main-body {
  height: 1200px;
}
.loadmoreWrap{
  background: #f0f0f0;
}
.noneDataSe{
  text-align: center;
  background: #fff;
  span{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    width: 240px;
    height: 220px;
    padding-top: 240px;
    background: url(~common/imgs/fach.jpg) no-repeat 50% 0;
    background-size: 240px 220px;
  }
}
</style>
